html, body, .view {
  min-height: 100%;
  height: 100%;
}

input::-moz-placeholder {
  color: #474747;
  font-size: .23rem;
  text-shadow: none;
  opacity: 1;
  -webkit-text-fill-color: initial;
}

input:-ms-input-placeholder {
  color: #474747;
  text-shadow: none;
  font-size: .23rem;
  -webkit-text-fill-color: initial;
}

input::-webkit-input-placeholder {
  color: #474747;
  font-size: .23rem;
  text-shadow: none;
  -webkit-text-fill-color: initial;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px transparent inset !important;
}

.clear-both {
  clear: both;
}

.clear {
  &:before {
	display: table;
	content: " ";
  }
  &:after {
	display: table;
	content: " ";
	clear: both;
  }
}

.ani-time {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.text-underline {
  text-decoration: underline;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.pointer {
  cursor: pointer;
}

.color {
  color: #00c9cb;
}

.is-transformed {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

input::-webkit-input-placeholder {
  color: #cccccc;
}

.draw-line {
  position: relative;
  cursor: pointer;
  color: #00cccd;
  &:after {
	width: 0;
	content: "";
	bottom: 0;
	z-index: 99;
	position: absolute;
	left: 0;
	height: 1px;
	background: #00cccd;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
  }
  &:hover {
	color: #00cccd;
	&:after {
	  width: 100%;
	}
  }
}

.center-flex {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.pop-btn-shadow {
  -ms-text-shadow: 0 0 .05rem #00cfd1, 0 0 .1rem #00cfd1, 0 0 .2rem #00cfd1, 0 0 .4rem #00cfd1, 0 0 .6rem #00cfd1;
  -moz-text-shadow: 0 0 .05rem #00cfd1, 0 0 .1rem #00cfd1, 0 0 .2rem #00cfd1, 0 0 .4rem #00cfd1, 0 0 .6rem #00cfd1;
  -webkit-text-shadow: 0 0 .05rem #00cfd1, 0 0 .1rem #00cfd1, 0 0 .2rem #00cfd1, 0 0 .4rem #00cfd1, 0 0 .6rem #00cfd1;
  text-shadow: 0 0 .05rem #00cfd1, 0 0 .1rem #00cfd1, 0 0 .2rem #00cfd1, 0 0 .4rem #00cfd1, 0 0 .6rem #00cfd1;
  filter: Shadow(Color='00cfd1', Direction='', Strength='5'), Shadow(Color='00cfd1', Direction='', Strength='20'), Shadow(Color='00cfd1', Direction='', Strength='40'), Shadow(Color='00cfd1', Direction='', Strength='60');
  color: #ffffff;
  &:hover {
	transition: all .5s;
	transform: translate3d(0, 5px, 0);
  }
}

.disbale-btn {
  color: #888888;
  pointer-events: none;
  cursor: default;
}

.bg-overplay {
  background: rgba(0, 0, 0, .5);
}

.bg-high-overplay {
  background: rgba(0, 0, 0, .7);
}

.bg-deep-overplay {
  background: rgba(50, 50, 50, 0.7);
}

.left {
  float: left;
}

.right {
  float: right;
}

.text-middle {
  text-align: center;
}

.gui-scrollgroup-bar {
  display: block;
  width: 4px !important;
  background-color: #09888a !important;
  position: absolute;
  opacity: 0.8;
  right: 0px;
  border-radius: 3px;
}

.pointer {
  cursor: pointer;
}

.iframe-wrap {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 100px;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.index-wrap {
  background: url("../../../assets/images/com-bg.jpg") no-repeat top center;
  background-size: 7.5rem 13.34rem;
  .logo-box {
	padding-top: 1.24rem;
	img {
	  display: block;
	  width: 1.78rem;
	  height: 1.69rem;
	  margin: 0 auto;
	}
  }
  .top-line {
	top: .32rem;
	width: .5rem;
	left: 50%;
	margin-left: -.25rem;
  }
  .left-line {
	left: .25rem;
	top: 50%;
	margin-top: -.25rem;
	height: .5rem;
  }
  .right-line {
	right: .25rem;
	top: 50%;
	margin-top: -.25rem;
	height: .5rem;
  }
  .login-box {
	.errmsg {
	  height: 1.1rem;
	  line-height: 1.1rem;
	  text-shadow: 0 0 .05rem #ffffff, 0 0 .1rem red, 0 0 .2rem red, 0 0 .4rem red, 0 0 .5rem #ffffff
	}
	.com-input {
	  width: 6.2rem;
	  margin: 0 auto .32rem;
	}
	.reg-input {
	  width: 5.82rem;
	  margin: 0 auto .32rem;
	  .g-input {
		width: 5.2rem;
	  }
	}
  }
  .button-box {
	height: .94rem;
	display: block;
	width: 3.14rem;
	margin: .45rem auto 0;
	line-height: .77rem;
	padding-right: .2rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: .2rem;
	-moz-border-radius: .2rem;
	border-radius: .2rem;
	background: url("../../../assets/images/login-btn.png") no-repeat;
	background-size: 3.14rem .94rem;
	&.btn-shadow {
	  background: url("../../../assets/images/btn-active.png") no-repeat;
	  background-size: 3.14rem .94rem;

	}
	&:active {
	  -webkit-transform: scale(.88);
	  -moz-transform: scale(.88);
	  -ms-transform: scale(.88);
	  -o-transform: scale(.88);
	  transform: scale(.88);
	}
	span {
	  color: #ffffff;
	  font-size: .29rem;
	  letter-spacing: .08rem;
	}
  }
  .register-btn {
	left: 0;
	bottom: .26rem;
	margin: auto;
	right: 0;
	img {
	  display: block;
	  margin: 0 auto;
	  &:nth-of-type(1) {
		width: .46rem;
	  }
	  &:nth-of-type(2) {
		width: .5rem;
	  }
	}
	span {
	  color: #cccccc;
	  margin: 0 auto;
	  width: 1rem;
	  display: block;
	  padding: .15rem 0rem;
	  &:active {
		color: #ffffff;
	  }

	}
  }
  .register-frame {
	width: 7.1rem;
	height: 8.2rem;
	margin: 0 auto;
	border: 1px solid #117a7c;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
  }
  .no-padding {
	padding-right: 0;
  }
}

.register-wrap {
  padding-top: .88rem;
  height: 100%;
  overflow: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .send {
	position: absolute;
	right: .3rem;
	top: .45rem;
	color: #cccccc;
	&:active {
	  color: #00cfd1;
	}
  }
  .color {
	color: #00cfd1;
  }
  .register-box {
	margin: .92rem auto .55rem;
	span {
	  font-size: .35rem;
	  color: #a7a7a7;
	  &.pop-btn-shadow {
		color: #ffffff;
	  }
	}
  }
  .inner-con {
	height: 100%;
	display: flex;
	flex-direction: column;
  }
  .register-con {
	flex: 1;
  }
  .img-wrap {
	height: .64rem;
  }
  .home-icon {
	margin: 0 auto;
	width: 1.24rem;
	display: block;
  }

}

.form-box {
  position: relative;
  width: 100%;
  height: 100%;
  .icon-frame {
	width: .6rem;
	margin-top: .36rem;
	height: .36rem;
	border-right: 1px solid #666666;
	img {
	  width: .30rem;
	}
  }
  .g-input {
	width: 5.58rem;
	height: 1.08rem;
	line-height: .5rem;
	padding: .1rem .68rem .1rem .24rem;
	font-size: .25rem;
	caret-color: #00c9cb;
	border-bottom: 1px solid #666666;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent;
  }
  .close-search-btn {
	right: .28rem;
	top: .4rem;
	width: .3rem;
	&:active {
	  -moz-transition: ease-in-out 200ms;
	  -o-transition: ease-in-out 200ms;
	  -webkit-transition: ease-in-out 200ms;
	  transition: ease-in-out 200ms;
	  -moz-transform: scale(1.1);
	  -ms-transform: scale(1.1);
	  -webkit-transform: scale(1.1);
	  transform: scale(1.1);
	  opacity: 0;
	}
	&:hover {
	  -moz-transform: scale(0.9);
	  -ms-transform: scale(0.9);
	  -webkit-transform: scale(0.9);
	  transform: scale(0.9);
	}
  }
}

.send-code-input .g-input {
  padding: .01rem 1.8rem .01rem .24rem;
  .close-search-btn {
	top: .45rem;
  }
}

.register-wrap .login-box .errmsg {
  line-height: 1.8rem;
}

.register-wrap .login-box .reg-input {
  margin: 0 auto;
}

.login-wrap {
  overflow: auto;

}

.home-wrap {
  padding-top: .6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .index-container {
	width: 6rem;
	height: 10rem;
	margin: 0 auto;
	background: #000000;
	border: 1px solid #117a7c;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 .2rem #00c2c4;
	-moz-box-shadow: 0 0 .2rem #00c2c4;
	box-shadow: 0 0 .2rem #00c2c4;
  }
  .inner-content {
	.btn-top {
	  margin: .9rem auto .46rem;
	  background: url("../../../assets/images/btn-bg.png") no-repeat center;
	  -webkit-background-size: 3.84rem .58rem;
	  background-size: 3.84rem .58rem;
	  width: 3.84rem;
	  height: .58rem;
	  line-height: .4rem;
	  color: #ffffff;
	  font-size: .32rem;
	  -webkit-border-radius: .2rem;
	  -moz-border-radius: .2rem;
	  border-radius: .2rem;
	}
	.content-tit {
	  line-height: .38rem;
	  color: #a3a3a3;
	  padding-bottom: .58rem;
	  font-size: .2rem;
	}
	.content-desc {
	  line-height: .58rem;
	  color: #00cfd1;
	  font-size: .26rem;
	}
  }
  .index-icon {
	bottom: 0;
	left: 50%;
	margin-left: -1.73rem;
	height: 2.38rem;
	width: 3.46rem;
	border-top: 1px solid #117a7c;
	img {
	  width: 1.78rem;
	}
  }
}

.swiper-container {
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.swiper-con {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  .home-icon {
	width: 1.24rem;
	display: block;
	bottom: .15rem;
	left: 50%;
	margin-left: -0.62rem;
	z-index: 2;
  }
}

.swiper-slide {
  width: 100%;
  margin: 0 auto;
  padding-top: .44rem;
  padding-left: .1rem;
  height: 10.8rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  img {
	display: block;
	margin: 0 auto;
  }
  .swiper-img1 {
	width: 6.78rem;
  }
  .swiper-img2 {
	width: 6.77rem;
  }
  .swiper-img3 {
	width: 6.78rem;
  }
}

.arrow-btn {
  left: 50%;
  bottom: .2rem;
  width: 1rem;
  margin-left: -.5rem;
  animation-name: arrowing;
  -ms-animation-name: arrowing;
  -moz-animation-name: arrowing;
  -o-animation-name: arrowing;
  -webkit-animation-name: arrowing;
  animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes arrowing {
  0%, 100% {
	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
	transform: translateY(-5px);
  }

  50% {
	-webkit-transform: translateY(8px);
	-moz-transform: translateY(8px);
	-ms-transform: translateY(8px);
	-o-transform: translateY(8px);
	transform: translateY(8px);
  }

}

@-webkit-keyframes arrowing {
  0%, 100% {
	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
	transform: translateY(-5px);
  }

  50% {
	-webkit-transform: translateY(8px);
	-moz-transform: translateY(8px);
	-ms-transform: translateY(8px);
	-o-transform: translateY(8px);
	transform: translateY(8px);
  }

}

.active-page {
  .active-wrap {
	width: 100%;
  }
  .active-bg {
	display: block;
	width: 100%;
	height: 22.52rem;
  }
  .footer-page {
	bottom: .28rem;
	left: 0;
	width: 100%;
	img {
	  display: block;
	  width: 1.24rem;
	  margin: 0 auto;
	}
	p {
	  line-height: .54rem;
	  height: .54rem;
	  color: #666666;
	  font-size: .18rem;
	}
  }
  .try-btn {
	left: 50%;
	bottom: 2.2rem;
	width: 2.7rem;
	padding-right: .17rem;
	margin-left: -1.35rem;
	height: 1.02rem;
	background: url("../../../assets/images/try-btn.png") no-repeat center;
	background-size: 2.7rem 1.02rem;
	line-height: .86rem;
	font-size: .35rem;
	color: #ffffff;
	letter-spacing: .02rem;
	&:active {
	  -webkit-transform: scale(.88);
	  -moz-transform: scale(.88);
	  -ms-transform: scale(.88);
	  -o-transform: scale(.88);
	  transform: scale(.88);
	}
  }
}

@media only screen and (max-width: 365px) {
  .form-box .g-input {
	width: 5.56rem;
  }
  .index-wrap .register-btn span {
	width: 1.2rem;
  }
  .index-wrap .login-box .reg-input .g-input {
	width: 4.9rem;
  }
  .swiper-slide .swiper-img1 {
	width: 6rem;
  }
  .swiper-slide .swiper-img2 {
	width: 6rem;
  }
  .swiper-slide .swiper-img3 {
	width: 6rem;
  }
}